<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="centerLocation" value="${office.address}"/>
<script type="text/javascript">		
	var place= new Object();
	place.id = '<c:out value="${office.id}" />';
	place.name =  '<c:out value="${office.business.businessName}/${office.address.city }" escapeXml="false" default=""/>';
	place.address = '<c:out value="${centerLocation.addressLine1}" />';
	place.city = '<c:out value="${centerLocation.city}" />';
	place.state = '<c:out value="${centerLocation.state}" />';
	place.zip = '<c:out value="${centerLocation.zip}" />';
	place.lat = ${centerLocation.latitude};
	place.lng = ${centerLocation.longitude};
	place.infoWindowHtml ="<div class=\"module info-window-box position-rel font-14\" style=\"background-color:white;\">";
	//retrieve the html from dom
	place.infoWindowHtml += "<div class='info-label'><strong>"+place.name+"</strong></div>";
	place.infoWindowHtml +="<div class=\"close-button position-abs\" onClick=\"javascript:mapUtil.closeInfoWindow()\"><i class=\"icon-remove-sign icon-2x css-pie\"></i></div>";
	place.infoWindowHtml += "<div class=\"bubble-arrow border\"></div>";
	place.infoWindowHtml += "<div class=\"bubble-arrow\"></div>";
	place.infoWindowHtml += "</div>";				
	place.infoWindowHtml += "</div>";
	place.infoWindowPixlOffset_x = -95;
	place.infoWindowPixlOffset_y = -35;		
	var mapUtilConfig={
		onMapLoadCallback:KSR.Office.onMapLoadCallback
	}
	
</script>	
<div class="full-width">
		<div class="alert alert-info font-22 margin-all">
		  <c:out value="${office.business.businessName}/${office.address.city }" escapeXml="false" default=""/>
		</div>		
		<div class="margin-left margin-top-half rating font-orange font-15">
							<jsp:include page="/WEB-INF/modules/displayStarsByRating.jsp">
								<jsp:param value="${office.rating}" name="rating"/>
							</jsp:include>
							<span class="review-count margin-left-half font-dark">
								<c:out value="${office.reviewCount}"/> 
								<c:choose>
									<c:when test="${office.reviewCount gt 1}">reviews</c:when>
									<c:otherwise>review</c:otherwise>
							</c:choose>
							</span>
						</div>
						<div class="margin-left margin-top-half">
							<label>Specialty:</label>
							<span class="business-name">
								<c:out value="${office.specialty }" escapeXml="false"/>
							</span>
						</div>				
						<c:if test="${not empty office.price}">
							<div class="margin-left">
								<label>Price:</label>
								<span class="business-name">
									<c:out value="$${office.price }/hr" escapeXml="false"/>
								</span>
							</div>												
						</c:if>								
						<address class="margin-left margin-bottom-half">
							<div class="">
							<a href="javascript:void(0)" class="reset-map" title="reset map">
								<span class="margin-right"><i class="icon-map-marker icon-large font-dark"></i></span>
								<c:out value="${office.address.addressLine1 }"/>,
								<c:if test="${not empty office.address.addressLine2}">
									<c:out value="${office.address.addressLine2}"/>,
								</c:if>
								<c:out value="${office.address.city}"/>,
								<c:out value="${office.address.state}"/>
								<c:out value="${office.address.zip}"/>
								</a>
							</div>
							<div>
								<span class="">Email:</span>
								<span>
									<a href="mailto:${office.emailAddress}">
										<c:out value="${office.emailAddress}"/>
									</a>
								</span>
							</div>
							<div>
								<span class="margin-right"><i class="icon-phone icon-large"></i></span>
								<span><c:out value="${office.phoneNumber}"/></span>
							</div>
						</address>	
				<div class="margin-left margin-top-half">
					<span class="icon  margin-right"><i class="icon-location-arrow"></i></span>
					<span class="business-name">
						<a data-toggle="modal" href="#getDirectionFormOverlay">Get Direction</a>
					</span>
				</div>						
				<div class="margin-left margin-top-half">
					<label class="bold">Owned by:</label>
					<span class="business-name">
						<a href="#">
							<c:out value="${office.business.businessName }" escapeXml="false"/>
						</a>
					</span>
				</div>
				<div class="margin-left margin-top-half">
					<p class="serif font-dark font-15">
						<c:out value="${office.description }" escapeXml="false"/>
					</p>
				</div>
		<div class="write-a-review padding-all">
			<a class="btn btn-large btn-danger write-review-button" href="javascript:void(0)"
			<%--
				<c:choose>
					<c:when test="${not empty customer}">
							href="#customerReviewOverlay"
					</c:when>
					<c:otherwise>
							href="#customerLoginSigninOverlay"
					</c:otherwise>
				</c:choose>
			--%>
			>
  				<i class="icon-comment"></i> Write a Review
			</a>
		</div>		
		<%--
		 --%>	
		<div class="padding-horizontal padding-vertical border-all round-corner margin-horizontal write-a-review-form-wrapper ksr-hide">
			<jsp:include page="/WEB-INF/modules/customer-review-form.jsp">
				<jsp:param value="create" name="mode"/>
			</jsp:include>
		</div>	
		<div class="customer-review margin-top">
			<div class="title-bar padding-all font-20">
				<c:if test="${not empty office.reviewCount}">
					<c:out value="${office.reviewCount}"/> 
					<c:choose>
						<c:when test="${office.reviewCount gt 1}">reviews</c:when>
						<c:otherwise>review</c:otherwise>
					</c:choose>
				</c:if>
				<div class="pull-right font-16">
				<i class="icon-bar-chart icon-large"></i>
					<a href="javascript:void(0)" class="review-distribution"> Rating distribution</a>
				</div>
			</div>
		<div class="margin-left margin-vertical rating-distribution font-18 ksr-hide" >
			<jsp:include page="/WEB-INF/modules/star-rating-distribution-chart.jsp">
				<jsp:param value="${fn:length(reviewsFor5str)},${fn:length(reviewsFor4str)},${fn:length(reviewsFor3str)},${fn:length(reviewsFor2str)},${fn:length(reviewsFor1str)}" name="starDistribution"/>
			</jsp:include>
			<%--
				<jsp:param value="128,328,365,758,12" name="starDistribution"/>
			 --%>
		</div>			
			<div class="review-list">
				<c:forEach items="${reviewList}" var="review" varStatus="rvStatus">
					<div class="review pull-left full-width" id="review-${review.id}">
						<span class="review-id hide">${review.id}</span>
						<span class="office-id hide">${office.id}</span>
						<span class="review-rating hide">${review.rating}</span>
						<span class="review-title hide">${review.title}</span>
						<span class="review-content hide">${review.content}</span>
			          <div class="fixed-fluid">
			               <div class="fluid-wrapper">
			                    <div class="fluid-column" style="margin-left:140px">
				                   <div class="customer-rating">
				                   		<c:set var="rating" value="${review.rating}"/>
				                   		<div class="margin-left margin-top-half rating font-orange font-18">
											<jsp:include page="/WEB-INF/modules/displayStarsByRating.jsp">
												<jsp:param value="${review.rating}" name="rating"/>
											</jsp:include>
											<span class="margin-left review-date font-16 font-dark">
												<c:choose>
													<c:when test="${not empty review.dateUpdated}">
														<fmt:formatDate pattern="M/d/yyyy" value="${review.dateUpdated }" />
													</c:when>
													<c:when test="${not empty review.dateCreated}">
														<fmt:formatDate pattern="M/d/yyyy" value="${review.dateCreated }" />
													</c:when>
													<c:otherwise>
													</c:otherwise>
												</c:choose>
												
											</span>
				                   </div>
			                    </div>
			                    <h4 class="review-content font-16 bold serif  capitalize">
			                    	<c:out value="${review.title}" escapeXml="false" default=""/>
			                    </h4>
			                    <div class="review-content font-14 serif margin-top">
			                    	<c:out value="${review.content}" escapeXml="false" default=""/>
			                    </div>
			                    <div class="clearfix"></div>
			                    <c:if test="${not empty customer and review.customer.id eq customer.id}">
				                    <div class="margin-top edit">
				                    	<a class="btn btn-sm btn-info edit-review" href="#review-${review.id}">
  											<i class="icon-edit"></i> Edit
										</a>
				                    </div>
								</c:if>
			               </div>
			          </div>					
			               <div class="x-fixed-column" style="width:140px">
			               		<div class="padding-all customer-info font-14">
			               			<div class="">
			               				<a href="<c:url value="/reviewer.html?id=${review.customer.id}" />">
				               				<i class="icon-user icon-large 
			               				<c:choose>
											<c:when test="${not empty customer and review.customer.id eq customer.id}">
												font-orange
											</c:when>
											<c:otherwise>
					               				font-lightgrey
											</c:otherwise>
										</c:choose>
			               				"></i>
			               				<span class=""><c:out value="${review.customer.firstName}" escapeXml="false" default=""/></span>
			               				<span class=""><c:out value="${review.customer.lastName}" escapeXml="false" default=""/></span>
			               				</a>
			               			</div>
			               			<div class="margin-top-half">
			               				<span class=""><c:out value="${review.customer.residentAddress.city}" escapeXml="false" default=""/></span>
			               				<span class=""><c:out value="${review.customer.residentAddress.state}" escapeXml="false" default=""/></span>
			               			</div>
			               			<div class="margin-top-half">
			               				<span class=""><c:out value="${fn:length(review.customer.reviews)}" escapeXml="false" default=""/></span>
			               				<span class="">reviews</span>
			               			</div>
			               		</div>
			               </div>
					</div>
					</div>
					<div class="clearfix"></div>
					<c:if test="${not rvStatus.last}">
						<div class="separate-row-single-1px"></div>
					</c:if>
				</c:forEach>
				
			</div>
		</div>	
</div>
<jsp:include page="/WEB-INF/modules/ksr-overlays.jsp">
	<jsp:param value="office" name="redirect"/>
</jsp:include>
<div class="clearfix"></div>
<script type="text/javascript">
<!--
	KSR.Office.init();
//-->
</script>